<template>
	<view class="inner-section">			
		<view class="common-normal-box patch-video">
			
			<view class="normal-tag-top">
				<view class="record-list">
					<view class="col">
						应到：<text class="key">{{totalNum}}人 </text> 
					</view> 
					<view class="col">
						签到：<text class="key">{{currentNum}}人 </text> 
					</view> 
				</view>
				
				<view class="check-list">
					<view class="col">
						<text class="circle-ok"></text> 正常打卡 
					</view> 
					<view class="col">
						<text class="circle-no"></text>  未打卡
					</view> 
				</view>
				
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">课堂全体考勤信息</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			
		
			<swiper class="swiper" circular :indicator-dots="true"  :interval="9000" :duration="500">
				<swiper-item v-for="(item,pageIndex) in studentList" :key="pageIndex">
				
					<view class="student-list">
						
						 <template v-for="(option,index) in item.datas" >
							 <view class="one-col" :key="index" >
								 <text :class="{'icon-ok':option.isobtain==1,'icon-no':option.isobtain==0}"></text>
							 	 <view class="avatar-img">
							 	 	<image :src="option.avatar?option.avatar:baseImgURL+'/icon_person.png'" mode="widthFix"></image>
							 	 </view>
								 
							 	<text>{{option.pName}}</text>
							 </view>
						 </template>
					 </view>
				</swiper-item>
			</swiper>
			<button class="btn-face" @click="startPreview"> <text class="icon-face"></text> 人脸识别 </button>
		</view>
		
		
	</view>
</template>

<script>
	import { fetchData } from '../../utils/request'
	import timeFun from '../../utils/timeFunction'
	import  {mapState} from 'vuex'
	
	export default {
		name:'AttendancePage',
		data() {
			return {
				studentList:[],
				totalNum:0,
				currentNum:0
			};
		},
		computed:{
			...mapState(['classId','baseImgURL','baseURL','schoolId'])
		},
		methods:{
			async getAllStudents(){
				this.studentList = [];
				let res = await fetchData({
				        url:'/database/person/info/selectStudentKQstudent',
				        method:'POST',
						data:{
							createT:timeFun.getTime(),
							upOrDown:'上学'
						}
				 })
				 
				 if(res.code==200){
					 let pageSize = 52;
					 let alldata = res.data;
					 let totalPage = Math.ceil(alldata.length/pageSize);
					 
					 this.totalNum = res.data.length;
					 
					 this.currentNum = res.data.reduce((prev,next)=>{
					 		return (next.isobtain==1) ? (prev + 1) : prev
					  },0)
					 
					 for(let i=0;i<totalPage;i++) {
						 let datas = alldata.slice(i*pageSize,(i+1)*pageSize);
						 this.studentList.push({
							 pageIndex:i+1,
							 datas:datas
						 })
					 }
				 } 
			},	
			// 人脸比对
			async comparePhoto(pUrl){
				let res = await fetchData({
					url:'/database/face/api/bidui',
					method:'POST',
					data:{
						schoolId:this.schoolId,
						pictureUrl:pUrl
					}
				 })	
				 if(res.code==200){
					 
					 if(res.data){
						  uni.$u.toast('人脸识别成功')
						// 设置为已签到
						 this.getAllStudents();
					 }
					
				 } 
			},
			// 上传图片到服务器
			uploadToServer(path){
				const token = uni.getStorageSync('token');
				let that = this;
				  // 上传图片到服务器
				uni.uploadFile({
					url: this.baseURL+'/back/oss/alioss/file/uploadFile', // 服务器上传接口
					filePath: path,
					name: 'file', // 必须填写，后台用来接收文件
					formData: {
						userCode:'1',
						fileType:'1',
						type:'head'
					},
					header:{
						Authorization: token
					},
					success: function (uploadRes) {
						let datas = JSON.parse(uploadRes.data).data;
					
						that.comparePhoto(datas[0])
						// 处理上传成功后的结果
					},
					fail: function (uploadErr) {
						console.log('upload fail:', uploadErr);
						// 处理上传失败的结果
					}
				});
			},		
			startPreview(){
				let that = this;
				uni.chooseImage({
				    count: 1, // 默认9，设置图片的数量
				    sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					camera:'front',  // 前置摄像头
				    success: function (res) {
				        // 成功选择图片后，获取图片路径
				        const tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths);
						
						// 压缩图片
						uni.compressImage({
							src: tempFilePaths[0],
							quality: 80, // 压缩质量
							success: function (compressRes) {
								// 获取压缩后的图片路径
								const compressedTempFilePath = compressRes.tempFilePath;
									console.log(compressedTempFilePath);
									that.uploadToServer(compressedTempFilePath);
								},
							})
						}
				})
			}
		},
		mounted(){
			this.getAllStudents();
		}
		 
			
	}
</script>

<style lang="scss" scoped>
.normal-tag-top {
	position: relative;
	.record-list {
		position: absolute;
		left: 7.81upx;
		top:3.91upx;
		width: 127.19upx;
		display: flex;
		font-size: 8.59upx;
		> view {
			margin-right: 7.81upx;
			text {
				color: #486FEE;
			}
		}
	}
	.check-list {
		position: absolute;
		right: 0upx;
		top:3.91upx;
		width: 127.19upx;
		display: flex;
		justify-content: flex-end;
		font-size: 6.25upx;
		> view {
			margin-right: 7.81upx;
			
			.circle-ok,.circle-no {
				
				width: 4.69upx;
				height:4.69upx;
				background: #0ED516;
				display: inline-block;
				border-radius: 50%;
				margin-right: 5.86upx;
			}
			.circle-no {
				background: #F50000;
			}
		}
	}
	
}
.patch-video {
	width:100%;
	height:363.47upx;
}

	
.swiper {
	height:82%;
}
.student-list {
	display: flex;
	justify-content:flex-start;
	margin-top: 8upx;
	flex-wrap: wrap;
	heihgt:351.56upx;
	.one-col {
		font-size: 7.81upx;
		color: #333;;
		line-height: 19.53upx;
		width: 9%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 15upx;
		position: relative;
		.avatar-img{
			width: 26.78upx;
			height:26.78upx;
			
			image {
				border-radius: 50%;
				height:100%!important;
			}
		}
		
		.icon-ok,.icon-no {
			width:8.61upx;
			height:8.61upx;
			background: url($imageurl+'/introduce/icon_ok.png') center top no-repeat;
			background-size:100%;
			margin-right: 3.91upx;
			position: absolute;
			right: 7.81upx;
			top: 15.5upx;
			z-index:60;
			
		}
		.icon-no {
			background: url($imageurl+'/introduce/icon_no.png') center top no-repeat;
			background-size:100%;
		}
		
	}
	

}

.btn-face {
	margin-top: 7.81upx;
	
	width: 89.06upx;
	height: 23.44upx;
	background: linear-gradient( 95deg, #486FEE 0%, #8CD4F8 100%);
	border-radius: 4.69upx;
	font-size: 8.59upx;
	color: #FFFFFF;
	line-height: 23.44upx;
	display: flex;
	align-items: center;
	justify-content: center;
	.icon-face {
		width:10.5upx;
		height:10.5upx;
		display: inline-block;
		margin-right:7.81upx;
		background: url($imageurl+'/introduce/icon_face.png') center center no-repeat;
		background-size:100%;
	}
}
</style>
